<template>
    <div class="content">
        <div class="content-card">
            <div class="content-card-item" v-for="index in 4" :key="index">
                <div style="height: 25vh; overflow: hidden;">
                    <img class="content-photo" src="https://liesmars.whu.edu.cn/__local/B/E0/37/4E9E07C121A4DB42B856A39E19B_E6795CAB_24D36.png">
                </div>
                <div class="content-info">
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <div class="vertical-line"></div>
                        <div>科研动态</div>
                    </div>
                    <p class="content-info-text">习近平总书记现场考察实验室2项科研成果</p>
                    <div style="font-size: 17px;">2023-12-14</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>

.content {
    background-color: #E8EEFB;
    height: 550px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-title {
    text-align: center;
    margin-bottom: 30px;
}

.content-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.content-card-item {
    width: 21vw;
}
.content-card-item:hover {
    cursor: pointer;
    color: #005aa0;
}
.content-photo {
    width: 100%;
    height: 25vh;
    transition: transform 0.3s ease; /* 添加平滑过渡 */
}
.content-card-item:hover .content-photo {
    transform: scale(1.1); /* 放大图片 */
}
.content-info {
    background-color: white;
    width: 100%;
    height: 20vh;
    padding: 20px 15px;
}

.vertical-line {
    width: 4px; /* 竖线宽度 */
    background-color: #0034be; /* 竖线颜色 */
    height: 20px; /* 竖线高度 */
    margin-right: 5px;
}

.content-info-text {
    font-weight: bold; 
    font-size: 17px;
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 2;        /* 限制文本行数为 2 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 响应式调整 */
@media (max-width: 992px) {
    .content-info {
        height: 180px;
    }
}

</style>
